---
title: <DropZone>
---

import { Callout } from "nextra/components";

# \<DropZone\>

<Callout>
The [`<DropZone>` component](/docs/api-reference/components/drop-zone) component is being replaced by the [`slot` field](/docs/api-reference/fields/slot), and will soon be deprecated and removed. For migration notes, see [these docs](/docs/guides/migrations/dropzones-to-slots).
</Callout>

Place droppable regions (zones) inside other components to enable nested components.

```tsx {1,9} copy
import { DropZone } from "@measured/puck";

const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" />
          </div>
        );
      },
    },
  },
};
```

## Props

| Param                               | Example                      | Type                                 | Status   |
| ----------------------------------- | ---------------------------- | ------------------------------------ | -------- |
| [`zone`](#zone)                     | `zone: "my-zone"`            | String                               | Required |
| [`allow`](#allow)                   | `allow: ["HeadingBlock"]`    | Array                                | -        |
| [`className`](#classname)           | `className: "MyClass"`       | String                               | -        |
| [`collisionAxis`](#collisionaxis)   | `collisionAxis: "x"`         | String                               | -        |
| [`disallow`](#disallow)             | `disallow: ["HeadingBlock"]` | Array                                | -        |
| [`minEmptyHeight`](#minemptyheight) | `minEmptyHeight: "256px"`    | CSSProperties["minHeight"] \| number | -        |
| [`ref`](#ref)                       | `ref: ref`                   | Ref                                  | -        |
| [`style`](#style)                   | `style: {display: "flex"}`   | CSSProperties                        | -        |

## Required props

### `zone`

Set the zone identifier for the given DropZone.

Must be unique within this component, but two different components can both define DropZones with the same `zone` value.

```tsx /zone="my-content"/ copy
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" />
          </div>
        );
      },
    },
  },
};
```

## Optional props

### `allow`

Only allow specific components to be dragged into the DropZone:

```tsx copy {7}
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" allow={["HeadingBlock"]} />
          </div>
        );
      },
    },
  },
};
```

### `className`

Provide a className to the DropZone component. The default DropZone styles will still be applied.

```tsx copy {7}
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" className="MyComponent" />
          </div>
        );
      },
    },
  },
};
```

### `collisionAxis`

Configure which axis Puck will use for overlap collision detection.

Options:

- `x` - detect collisions based their x-axis overlap
- `y` - detect collisions based their y-axis overlap
- `dynamic` - automatically choose an axis based on the direction of travel

The defaults are set based on the CSS layout of the parent:

- grid: `dynamic`
- flex (row): `x`
- inline/inline-block: `x`
- Everything else: `y`

```tsx copy {7}
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" collisionAxis="dynamic" />
          </div>
        );
      },
    },
  },
};
```

### `disallow`

Allow all but specific components to be dragged into the DropZone. Any items in `allow` will override `disallow`.

```tsx copy {7}
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" disallow={["HeadingBlock"]} />
          </div>
        );
      },
    },
  },
};
```

### `minEmptyHeight`

The minimum height of the DropZone when empty. Defaults to `128px`.

```tsx copy {7}
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" minEmptyHeight="256px" />
          </div>
        );
      },
    },
  },
};
```

### `ref`

A [React ref](https://react.dev/learn/manipulating-the-dom-with-refs), assigned to the root node of the DropZone.

```tsx copy {9}
const config = {
  components: {
    Example: {
      render: () => {
        const ref = useRef();

        return (
          <div>
            <DropZone zone="my-content" ref={ref} />
          </div>
        );
      },
    },
  },
};
```

### `style`

Provide a style attribute to the DropZone. The default DropZone styles will still be applied.

```tsx copy {7}
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" style={{ display: "flex" }} />
          </div>
        );
      },
    },
  },
};
```

## React server components

By default, DropZones don't work with React server components as they rely on context.

Instead, you can use the [`renderDropZone` method](/docs/api-reference/configuration/component-config#propspuckrenderdropzone) passed to your component render function.
